<template>
    <div>
        <div class="personalized-box">
        <div class="personalized-header">
            <span class="icon iconfont icon-arrow-left-bold" @click="gotorecommend"></span>
            <span class="name">专辑广场</span>
        </div>
        <div class="personalized-content">
            <ul>
                <li v-for="(item,index) in lists" :key="index" @click="gotoAlbumList(item.id)">
                    <div class="img">
                      <img :src="item.picUrl">  
                    </div>
                    <span class="words">{{item.name}}</span> 
                    <span class="name">{{item.artist.name}}</span>
                  </li>
            </ul>
        </div>
    </div>
    </div>
</template>

<script>
    import {getAlbumNewest} from '../../api/recommend'
    export default {
        data() {
            return {
                lists:[],
            }
        },
        created(){
            // 获取最新专辑
            getAlbumNewest().then(data=>{
                if(data.code == 200){
                    this.lists = data.albums
                }
              })
        },
        methods: {
            gotorecommend(){
                this.$router.push("/recommend")
            },
            gotoAlbumList(id){
                this.$router.push({
                    path:'/recommend/album/albumList',
                    query:{
                        id,
                    }
                })
            }
        },
    }
</script>

<style lang="less">
.personalized-box{
    width: 100%;
    .personalized-header{
        width: 100%;
        height: 40px;
        background-color: #d4473c;
        position: relative;
        color: white;
        .icon{
            display: inline-block;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        .name{
            font-size: 15px;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            width: 4em;
            text-align: center;
            position:absolute;
            top: 0;
            left:0;
            right: 0;
            margin: auto;
        }
    }
    .personalized-content{
        width: 96%;
        margin: 10px auto 0;
        ul{
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          li{
            width: 115px;
            position: relative;
            // height: 160px;
            color: #28282b;
            font-size: 12px;
            margin-bottom: 10px;
            margin-left: 7px;
            &:nth-child(3n+1){
                margin-left: 0;
            }
            .words{
                display: block;
                // height: 32px;
                width: 100%;
              margin-top: 7px;
              overflow: hidden;
            //   text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .img{
                width: 100%;
                height: 115px;
                position: relative;
                background-color: #d4473c;
                border-radius: 5px;
                overflow: hidden;
                img{
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                  display: block;
                  width: 100%;
                  border-radius: 5px;
      
                }
            }
            .name{
                font-size: 12px;
                color: #aaa;
            }
          }
        }
    }
}

</style>